<template>
  <div class="basetable">
    <VXETable ref="baseTable" :tableOption="tableOption" @btnEvent="btnEvent">
      <template v-slot:tableButton>
        <el-button type="primary" @click="triggerRef">新增</el-button>
      </template>
    </VXETable>
    <add-Table ref="addTable" :detailData="rowData.detailData"></add-Table>
  </div>
</template>

<script setup lang="ts">
import VXETable from "@/components/vxe-table/index.vue";
import AddTable from "./addTable.vue";
import tableOption from "./data/data";
import { ref } from "vue";
import { deleteTable,getTableDetaill } from "@/api/table_test";
import { ElMessage, ElMessageBox } from "element-plus";
const baseTable = ref();
const addTable = ref();
const triggerRef = () => {
  addTable.value.data.title = "新增";
  addTable.value.data.dialogVisible = true;
  addTable.value.formData = reactive({});
};
let rowData = reactive({
  detailData: {},
});
const btnEvent = (row: any, btn: any) => {
  if (btn.type == "delete") {
    let obj = {
      id: row.id,
    };
    ElMessageBox.confirm("确定要删除这条数据吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        deleteTableData(obj);
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "您已取消删除操作",
        });
      });
  } else if (btn.type == "edit") {
    addTable.value.data.title = "修改";
    getTableDetaillData(row.id)
  } else if (btn.type == "view") {
    addTable.value.data.title = "查看";
    getTableDetaillData(row.id)
  }
};
//删除数据
const deleteTableData = (params: any) => {
  deleteTable(params).then((res: any) => {
    if (res.status == 200) {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: "success",
      });
      baseTable.value.getTableList("/api/table_test/list", "post");
    }
  });
};
//获取一条数据
const getTableDetaillData = (id:string | number) => {
  let params = { id: id };
  getTableDetaill(params).then((res: any) => {
    if (res.status == 200) {
      rowData.detailData = res.data;
      addTable.value.data.dialogVisible = true;
    }
  });
};
onMounted(() => {
  baseTable.value.getTableList("/api/table_test/list", "post");
});
</script>

<style scoped lang="scss">
.basetable {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  min-height: 500px;
}
</style>
